
<template>
	<div class="app-container">
		<div ref="box1" class="total-box">
			<div
				v-for="(item, index) in totalItems"
				:key="index"
				class="total-item"
				:style="{ borderBottomColor: item.borderColor }"
			>
				<div class="total-title">{{ item.title }}</div>
				<div class="total-val"><span :style="{color:item.borderColor,fontWeight:600}">{{ totalInfo[item.value] }}</span><span class="size">{{ item.unit }}</span></div>
			</div>
		</div>
		<jk-operation-card ref="box2" class="margin-bottom-10">
			<div class="flex-between-center-wrap">
				<div class="flex-start-center-wrap">
					<currentTime :current-time="currentTime"></currentTime>
				</div>
				<i style="cursor: pointer" class="el-icon-refresh" @click="onSearchBtn"></i>

			</div>
		</jk-operation-card>
		<jk-card>
			<component
				:is="viewType"
				:loading="tableLoading"
				:table-data="tableData"
				:height="tableHeight + 20"
			>
			</component>
		</jk-card>
	</div>
</template>

<script>
    import calHeight from '@/mixins/cal-table-height';
    import { formatTime } from '@/utils/jk/jk-tool';
    import permissionMixin from '@/mixins/permission-mixin';
    import listView from './components/list-view';
    import { productionTechnologicalMonitor } from '@/api/production/technologicalMonitor';
    import currentTime from '@/views/productionMonitor/equipmentMonitoring/components/current-time.vue';

    const REFRESH_INTERVAL = 10000;
    const TIME_INTERVAL = 1000;

    export default {
        name: 'TechnologicalMonitor',
        mixins: [permissionMixin, calHeight],
        components: {
            currentTime,
            listView
        },
        data() {
            return {
                totalItems: [
                    { title: '品种不一致', value: 'allPlan', unit: '台', borderColor: 'orange' },
                    { title: '工艺单缺失', value: 'allAbnormal', unit: '项', borderColor: 'purple' },
                    { title: '异常项目', value: 'allAbnormalItem', unit: '项', borderColor: 'red' }
                ],
                viewType: 'listView',
                tableLoading: false,
                tableData: [
                ],
                totalInfo: {
                    allPlan: 0,
                    allAbnormal: 0,
                    allAbnormalItem: 0
                },
                currentTime: '',
                interVal: null,
                interVal2: null
            };
        },
        methods: {
            runTimeAndData() {
                this.currentTime = formatTime(Date.now());
                this.updateCurrentTime();
                this.getListRequest(true); // 初次调用时传递 `true` 显示加载状态
                // this.updateListData();
            },
            updateCurrentTime() {
                clearInterval(this.interVal2);
                this.interVal2 = setInterval(() => {
                    this.currentTime = formatTime(Date.now());
                }, TIME_INTERVAL);
            },
            updateListData() {
                clearInterval(this.interVal);
                this.interVal = setInterval(() => {
                    this.getListRequest(false); // 定时器调用时传递 `false` 不显示加载状态
                }, REFRESH_INTERVAL);
            },
            clearTimers() {
                clearInterval(this.interVal);
                clearInterval(this.interVal2);
            },
            getListRequest(showLoading = false) {
                if (showLoading) {
                    this.tableLoading = true;
                }
                productionTechnologicalMonitor().then((res) => {
                    if (showLoading) {
                        this.tableLoading = false;
                    }
                    if (res.data.status === 200) {
                        this.tableData = res.data.res;
                        this.totalInfo.allPlan = this.calculateTotalPlan(this.tableData, 'productAlarm');
                        this.totalInfo.allAbnormalItem = this.calculateTotalAbnormal(this.tableData);
                        this.totalInfo.allAbnormal = this.calculateTotalPlan(this.tableData, 'specSheetAlarm');
                    }
                });
            },

            calculateTotalPlan(data, key) {
                return data.reduce((sum, item) => sum + (item[key] ? 1 : 0), 0);
            },
            calculateTotalAbnormal(data) {
                return data.reduce((sum, item) => {
                    if (!item.itemList) return sum; // 如果 itemList 是 null，则跳过该项
                    return sum + item.itemList.reduce((itemSum, subItem) => itemSum + (subItem.ifOverrun ? 1 : 0), 0);
                }, 0);
            },

            onSearchBtn() {
                this.getListRequest(true); // 点击搜索按钮时显示加载状态
            }
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {
                vm.runTimeAndData();
            });
        },
        beforeRouteLeave(to, from, next) {
            this.clearTimers();
            next();
        },
        mounted() {
            this.runTimeAndData();
        }

    };
</script>
<style scoped lang="scss">
.size {
    font-size: 14px;
    margin-left: 3px;
}
.total-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    .total-item {
        //width: 100px;
        padding: 10px 20px;
        //height: 70px;
        background: #fff;
        border: solid 1px #eee;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 0 5px;
        border-radius: 10px;
        box-shadow: 0 0 2px 1px #eee;
        border-bottom: 3px solid; /* 只设置下边框 */
        .total-title {
            color: #808695;
            font-size: 16px;
        }
        .total-val {
            font-size: 18px;
            color: #515a6e;
            margin-top: 2px;
        }
    }
    .total-item:hover {
        box-shadow: 0 0 2px 1px #eee;
    }
}

</style>
